import Pointer from '@components/Pointer'
import { isPc, modelS, SKey } from '@views/store'
import { genTemplateArr, genTemplateArrFill0 } from '@views/utils'
import { Icon } from 'vant'
import { defineComponent, reactive } from 'vue'
import ImgS from './ImgS'
import Slider from './Slider'
import Sliders from './Sliders'

export default defineComponent({
    setup: () => {
        const colors = ['#FFEEE7', '#FFDCDA', '#FEE3B9', '#ECB9AE', '#DC9FA1', '#FAAD7F', '#C18F80', '#C2656A', '#CF714B', '#C2806C', '#833C3B', '#7A3317']
        const tabbarName = ['feature', 'eyebrow', 'eye', 'nose', 'lip']
        const getSrc = (name: string) => new URL(`../img/${name}.png`, import.meta.url).href
        const _s = reactive({
            tabbarIdx: 2
        })

        const Feature = () => <>
            <div class='title'>颜色</div>
            <div class='colors'>
                {colors.map((color, idx) => <div class='item' style={{ backgroundColor: color }}
                    onClick={() => modelS.SkinColorIndex = idx}>
                    {modelS.SkinColorIndex === idx && <Icon name='success' />}
                </div>)}
            </div>
            {!isPc.value && <Pointer />}
            <div class='title title2'>脸型</div>
            <ImgS names={genTemplateArr(4)} storeKey='FaceStyleIndex' dir='feature' />
            <Sliders cfg={{
                FaceWide: '脸宽',
                JawLength: '长脸',
                LowJaw: '下颌'
            }} />
        </>

        const Eyebrow = <>
            <div class="title">眉毛形状</div>
            <ImgS class='eyebrow' names={modelS.modelGender === 'MALE' ? genTemplateArrFill0(9, { pre: 'Face_eyebrow_', suffix: '_01', start: 1 }) : genTemplateArrFill0(9)} storeKey='BrowStyleIndex' dir={`${modelS.modelGender}/eyebrow`} />
        </>

        const Eye = <>
            <div class="title">眼睛形状</div>
            <ImgS names={genTemplateArr(5)} storeKey='EyeStyleIndex' dir='eye' />
            <Sliders cfg={{ EyeBig: '大小', EyeHeight: '高度', EyeRotate: '旋转', EyeDistance: '间距' }} />
        </>

        const Nose = <>
            <div class="title">鼻型</div>
            <ImgS names={genTemplateArr(5)} storeKey='NoseStyleIndex' dir='nose' />
            <Sliders cfg={{ NoseWide: '鼻子宽度', NoseLength: '鼻子长度' }} />
        </>

        const Lip = Object.entries({ MouthBig: '嘴唇大小', MouthUp: '上下位置', MouthLip: '嘴唇厚度' })
            .map(([key, title]) => <Slider title={title} storeKey={key as SKey} max={0.8} />)
        const tabbarCom = [<Feature />, Eyebrow, Eye, Nose, Lip]

        const Tabbar = () => <div class="tabbar">
            {tabbarName.map((name, idx) => <img class='tabbar-item' src={getSrc(idx === _s.tabbarIdx ? name + '_active' : name)}
                onClick={() => _s.tabbarIdx = idx} />)}
        </div>
        const phoneCom = () => <>
            {tabbarCom[_s.tabbarIdx]}
            <Tabbar />
        </>
        const pcCom = () => <>
            <Tabbar />
            <div class="right-c">{tabbarCom[_s.tabbarIdx]}</div>
        </>
        return isPc.value ? pcCom : phoneCom
    }
})